<template>
  <div class="page">
    <div class="money-content">
      <div class="name">能量充值</div>
      <div class="flex align-center justify-between input">
        <input placeholder="自定义充值" />
        <div class="money">
          <div class="num">100</div>
          <span>能量</span>
        </div>
      </div>

        <div class="goods">
          <div class="good-item" v-for="(item) in [12,34,5,6,7,8]">
            <div class="money">
              <div class="num">100</div>
              <span>能量</span>
            </div>
            <div class="price">8 元</div>
          </div>
        </div>

        <div class="submit">立即充值</div>
    </div>

    <div class="tab-content">
      <div class="name">做任务赚能量</div>
      <div class="tab-ul">
        <div class="tab-item" >
          <image class="icon" src=""></image>
          <div class="txt">转发至微信赚能量</div>
        </div>
        <div class="tab-item" >
          <image class="icon" src=""></image>
          <div class="txt">发布帖子赚能量</div>
        </div>
        <div class="tab-item" >
          <image class="icon" src=""></image>
          <div class="txt">去评论赚能量</div>
        </div>
      </div>
    </div>
  </div>
  <BTab></BTab>
</template>

<script lang="ts" setup>

import BTab from "../../components/BTab.vue";
</script>

<style scoped lang="scss">
  .page {
    padding: 32rpx;
    .name {
      height: 42rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: #0D3333;
      line-height: 42rpx;
    }
    .money {
      display: flex;
      align-items: center;
      color: #0D3333;
      .num {
        font-size: 40rpx;
        margin: 0 12rpx 0 0;
        font-weight: 600;
      }
      span {
        font-size: 20rpx;
        font-weight: 400;
        color: #0D3333;
        line-height: 20rpx;
      }
    }
  }
  .money-content {
    .input {
      height: 72rpx;
      background: rgba(36,250,246,0.16);
      border-radius: 24rpx;
      border: 2rpx solid #24FAF6;
      padding: 0 38rpx;
      input {
        font-size: 24rpx;
        font-weight: 400;
        color: #0D3333;
      }
      .next {
        height: 28px;
        font-size: 20px;
        font-weight: 400;
        color: #0D3333;
        line-height: 28px;
        padding: 0 16rpx;
      }
    }
    .goods {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 24rpx;
      padding: 32rpx 0 0;
      .good-item {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        width: 212rpx;
        height: 108rpx;
        background: #FFFFFF;
        border-radius: 24rpx;
        border: 2rpx solid rgba(0,0,0,0.08);
        .price {

        }
      }
    }

    .submit {
      height: 64rpx;
      background: rgba(13, 51, 51,  0.08);
      border-radius: 24rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #0D3333;
      line-height: 64rpx;
      text-align: center;
      margin: 32rpx 0;
    }
  }

  .tab-content {
    .tab-ul {
      height: 292rpx;
      background: #FFFFFF;
      border-radius: 24px;
      border: 2px solid rgba(0,0,0,0.08);
      padding: 0 38rpx;
      margin: 18rpx 0 ;
      .tab-item {
        display: flex;
        align-items: center;
        height: 96rpx;
        border-top:  2px solid rgba(0,0,0,0.08);
        &:first-child {
          border: none;
        }
        .icon {
          width: 42rpx;
          height: 42rpx;
          background: rgba(36, 250, 246, 0.38);
        }
        .txt {
          font-size: 28rpx;
          font-weight: 400;
          color: #0D3333;
          line-height: 28rpx;
          padding: 0 22rpx;
        }
      }
    }
  }
</style>
